<!--
 * @Author: mzx
 * @Date: 2021-09-03 10:52:28
 * @LastEditors: mzx
 * @LastEditTime: 2021-09-09 16:57:41
 * @Description: 
-->
<template>
  <div class="dashboard-container">
    <!-- 卡片行 -->
    <div class="topCard">
      <!-- 访问量卡片 -->
      <div class="card">
        <!-- 卡片名 -->
        <div class="card-title">访问量</div>
        <!-- 卡片内容 -->
        <div class="card-content">
          <!-- 内容上半部分 -->
          <div class="content-top">
            <div class="card-data">25,848</div>
            <div class="card-charts"><p>日同比 12.5% 周同比 5%</p></div>
          </div>
          <!-- 内容下半部分 -->
          <div class="content-bottom">
            <div class="bottom-left">总访问量</div>
            <div class="bottom-right">280万</div>
          </div>
        </div>
      </div>
      <!-- 销售额卡片 -->
      <div class="card">
        <!-- 卡片名 -->
        <div class="card-title">销售额</div>
        <!-- 卡片内容 -->
        <div class="card-content">
          <!-- 内容上半部分 -->
          <div class="content-top">
            <div class="card-data">￥12,000</div>
            <div class="card-charts">
              <div class="conProgress" id="conProgress"></div>
              <!-- <div class="descrption">70%</div> -->
            </div>
          </div>
          <!-- 内容下半部分 -->
          <div class="content-bottom">
            <div class="bottom-left">总销售额</div>
            <div class="bottom-right">80万</div>
          </div>
        </div>
      </div>
      <!-- 订单量卡片 -->
      <div class="card">
        <!-- 卡片名 -->
        <div class="card-title">订单量</div>
        <!-- 卡片内容 -->
        <div class="card-content">
          <!-- 内容上半部分 -->
          <div class="content-top">
            <div class="card-data">25,848</div>
            <div class="card-charts">
              <div class="conArea" id="conArea"></div>
            </div>
          </div>
          <!-- 内容下半部分 -->
          <div class="content-bottom">
            <div class="bottom-left">转化率</div>
            <div class="bottom-right">60%</div>
          </div>
        </div>
      </div>
      <!-- 用户卡片 -->
      <div class="card">
        <!-- 卡片名 -->
        <div class="card-title">用户</div>
        <!-- 卡片内容 -->
        <div class="card-content">
          <!-- 内容上半部分 -->
          <div class="content-top">
            <div class="card-data">128位</div>
            <div class="card-charts"><p>日同比 12.5% 周同比 5%</p></div>
          </div>
          <!-- 内容下半部分 -->
          <div class="content-bottom">
            <div class="bottom-left">总用户</div>
            <div class="bottom-right">10800人</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图标行 -->
    <div class="icon-content">
      <div class="btn-content">
        <div class="btninner">
          <div class="innertop">
            <svg-icon iconClass="duser"></svg-icon>
            <div class="innerbottom">用户</div>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <div class="btninner">
          <div class="innertop">
            <svg-icon iconClass="dfenxi"></svg-icon>
            <div class="innerbottom">分析</div>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <div class="btninner">
          <div class="innertop">
            <svg-icon iconClass="dtag"></svg-icon>
            <div class="innerbottom">标签</div>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <div class="btninner">
          <div class="innertop">
            <svg-icon iconClass="dmsg"></svg-icon>
            <div class="innerbottom">消息</div>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <div class="btninner">
          <div class="innertop">
            <svg-icon iconClass="dpiaoju"></svg-icon>
            <div class="innerbottom">票据</div>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <div class="btninner">
          <div class="innertop">
            <svg-icon iconClass="dlist"></svg-icon>
            <div class="innerbottom">订单</div>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <div class="btninner">
          <div class="innertop">
            <svg-icon iconClass="dproduct"></svg-icon>
            <div class="innerbottom">产品</div>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <div class="btninner">
          <div class="innertop">
            <svg-icon iconClass="dset"></svg-icon>
            <div class="innerbottom">配置</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单量 -->
    <div class="chartlist">
      <div class="chartlist-title">订单量</div>
      <div class="chartlist-content">
        <div class="chart-list" id="conColumn">
          <h4>订单趋势</h4>
        </div>
        <div class="ddlist">
          <div id="ddsort">订单量排行</div>
          <div class="datalist">
            <el-table
              :data="tableData"
              style="width: 99%"
              size="mini"
              height="216px"
              :default-sort="{prop: 'num', order: 'descending'}"
            >
              <el-table-column type="index" width="50">
              </el-table-column>
              <el-table-column prop="name"> </el-table-column>
              <el-table-column sortable prop="num" align="right">
                <template v-slot="scope"><el-tag size="mini" type="success">{{scope.row.num}}</el-tag></template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部三栏 -->
    <div class="bottom">
      <div class="remark">
        <div class="bottom-title">平均评价</div>
        <div class="bottom-content">
          {{ starValue }}
          <el-rate v-model="starValue" allow-half></el-rate>
          <div class="elProgress">
            <el-progress :percentage="90"></el-progress>
            <el-progress :percentage="60" color="#7de14c"></el-progress>
            <el-progress :percentage="30" color="#feb953"></el-progress>
            <el-progress :percentage="10" color="#ff7373"></el-progress>
            <el-progress :percentage="0"></el-progress>
          </div>
        </div>
      </div>
      <div class="user">
        <div class="bottom-title">用户</div>
        <div class="bottom-content">
          <div class="liquid" id="conLiquid"></div>
        </div>
      </div>
      <div class="goal">
        <div class="bottom-title">本月目标</div>
        <div class="bottom-content">
          <el-progress type="circle" :percentage="90"></el-progress>
          <div class="progressdes">恭喜！本月目标已达成</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scope>
.dashboard-container {
  .topCard {
    height: 200px;
    display: flex;
    .card {
      flex: 1;
      margin-right: 10px;
      background-color: #fff;
      border-radius: 5px;
      .card-title {
        height: 50px;
        border-bottom: 1px solid #e5e9ee;
        padding: 14px 16px;
      }
      .card-content {
        padding: 12px;
        color: #515a6e;
        .content-top {
          height: 98px;
          .card-data {
            font-size: 30px;
          }
          .card-charts {
            font-size: 14px;
            display: flex;
            .conProgress,
            .conArea {
              flex: 1;
              // display: inline-block;
              // width: 100%;
              height: 65px;
            }
            .conArea {
              position: relative;
              right: 10px;
            }
            .descrption {
              display: inline-block;
              font-size: 16px;
              margin-left: 5px;
              line-height: 65px;
            }
          }
        }
        .content-bottom {
          border-top: 1px solid #e5e9ee;
          height: 50px;
          line-height: 40px;
          .bottom-left {
            float: left;
          }
          .bottom-right {
            float: right;
          }
        }
      }
    }
    .card:last-child {
      margin: 0px;
    }
  }
  .icon-content {
    height: 100px;
    margin: 15px 0px;
    display: flex;
    justify-content: space-between;
    .btn-content {
      width: 100px;
      border-radius: 5px;
      background-color: #fff;
      .btninner {
        padding: 16px;
        .innertop {
          height: 35px;
          text-align: center;
          .svg-icon {
            width: 1.8em;
            height: 1.8em;
          }
        }
        .innerbottom {
          color: #666;
          margin-top: 10px;
        }
      }
    }
    .btn-content:hover {
      box-shadow: 0 0 5px 5px rgba(196, 195, 195, 0.438);
      cursor: pointer;
    }
  }
  .chartlist {
    height: 350px;
    background: #fff;
    border-radius: 5px;
    .chartlist-title {
      height: 50px;
      border-bottom: 1px solid #e5e9ee;
      padding: 14px 16px;
      color: #515a6e;
    }
    .chartlist-content {
      display: flex;
      .chart-list {
        width: 800px;
        padding: 0px 20px;
        height: 220px;
      }
      .ddlist {
        flex: 1;
        padding: 0px 20px;
        #ddsort{
          margin-top: 21.28px;
          font-weight: bold;
        }
        .datalist {
          width: 100%;
          height: 100%;
          .thead > tr{
            padding: 0px;
          }
        }
      }
    }
  }
  .bottom {
    height: 300px;
    margin-top: 2em;
    display: flex;
    .remark {
      flex: 2;
      background-color: #fff;
      border-radius: 5px;
      margin-right: 1em;
      .bottom-content {
        padding: 18px;
        font-size: 48px;
        color: #515a6e;
        .el-rate {
          display: inline-block;
        }
        .elProgress {
          margin-top: 20px;
          .el-progress {
            line-height: 25px;
          }
        }
      }
    }
    .user {
      flex: 1;
      background-color: #fff;
      border-radius: 5px;
      margin-right: 1em;
      text-align: center;
      .bottom-content {
        width: 100%;
        height: 200px;
        padding: 20px;
      }
      .liquid {
        height: 200px;
      }
    }
    .goal {
      flex: 1;
      background-color: #fff;
      border-radius: 5px;
      .bottom-content {
        text-align: center;
        .el-progress {
          margin-top: 30px;
        }
        .progressdes {
          margin-top: 15px;
          font-size: 14px;
          color: #515a6e;
        }
      }
    }
    .bottom-title {
      height: 50px;
      border-bottom: 1px solid #e5e9ee;
      padding: 14px 16px;
    }
  }
}
</style>

<script>
import { mapGetters, mapActions } from "vuex";
import { Progress, Area, Column, Liquid } from "@antv/g2plot";

export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
      AreaData: [
        {
          timePeriod: "2006 Q3",
          value: 1,
        },
        {
          timePeriod: "2006 Q4",
          value: 1.08,
        },
        {
          timePeriod: "2007 Q1",
          value: 1.17,
        },
        {
          timePeriod: "2007 Q2",
          value: 1.26,
        },
        {
          timePeriod: "2007 Q3",
          value: 1.34,
        },
        {
          timePeriod: "2007 Q4",
          value: 1.41,
        },
        {
          timePeriod: "2008 Q1",
          value: 1.52,
        },
        {
          timePeriod: "2008 Q2",
          value: 1.67,
        },
        {
          timePeriod: "2008 Q3",
          value: 1.84,
        },
        {
          timePeriod: "2008 Q4",
          value: 2.07,
        },
        {
          timePeriod: "2009 Q1",
          value: 2.39,
        },
        {
          timePeriod: "2009 Q2",
          value: 2.71,
        },
        {
          timePeriod: "2009 Q3",
          value: 3.03,
        },
        {
          timePeriod: "2009 Q4",
          value: 3.33,
        },
        {
          timePeriod: "2010 Q1",
          value: 3.5,
        },
        {
          timePeriod: "2010 Q2",
          value: 3.37,
        },
        {
          timePeriod: "2010 Q3",
          value: 3.15,
        },
        {
          timePeriod: "2010 Q4",
          value: 3.01,
        },
        {
          timePeriod: "2011 Q1",
          value: 2.8,
        },
        {
          timePeriod: "2011 Q2",
          value: 2.8,
        },
        {
          timePeriod: "2011 Q3",
          value: 2.84,
        },
        {
          timePeriod: "2011 Q4",
          value: 2.75,
        },
        {
          timePeriod: "2012 Q1",
          value: 2.64,
        },
        {
          timePeriod: "2012 Q2",
          value: 2.55,
        },
        {
          timePeriod: "2012 Q3",
          value: 2.46,
        },
        {
          timePeriod: "2012 Q4",
          value: 2.45,
        },
        {
          timePeriod: "2013 Q1",
          value: 2.57,
        },
        {
          timePeriod: "2013 Q2",
          value: 2.68,
        },
        {
          timePeriod: "2013 Q3",
          value: 2.8,
        },
        {
          timePeriod: "2013 Q4",
          value: 2.89,
        },
        {
          timePeriod: "2014 Q1",
          value: 2.85,
        },
        {
          timePeriod: "2014 Q2",
          value: 2.73,
        },
        {
          timePeriod: "2014 Q3",
          value: 2.54,
        },
        {
          timePeriod: "2014 Q4",
          value: 2.32,
        },
        {
          timePeriod: "2015 Q1",
          value: 2.25,
        },
        {
          timePeriod: "2015 Q2",
          value: 2.33,
        },
        {
          timePeriod: "2015 Q3",
          value: 2.53,
        },
        {
          timePeriod: "2015 Q4",
          value: 2.74,
        },
        {
          timePeriod: "2016 Q1",
          value: 2.76,
        },
        {
          timePeriod: "2016 Q2",
          value: 2.61,
        },
        {
          timePeriod: "2016 Q3",
          value: 2.35,
        },
        {
          timePeriod: "2016 Q4",
          value: 2.11,
        },
        {
          timePeriod: "2017 Q1",
          value: 2.08,
        },
        {
          timePeriod: "2017 Q2",
          value: 2.2,
        },
        {
          timePeriod: "2017 Q3",
          value: 2.38,
        },
        {
          timePeriod: "2017 Q4",
          value: 2.59,
        },
        {
          timePeriod: "2018 Q1",
          value: 2.63,
        },
        {
          timePeriod: "2018 Q2",
          value: 2.67,
        },
        {
          timePeriod: "2018 Q3",
          value: 2.64,
        },
        {
          timePeriod: "2018 Q4",
          value: 2.5,
        },
        {
          timePeriod: "2019 Q1",
          value: 2.31,
        },
        {
          timePeriod: "2019 Q2",
          value: 2.04,
        },
        {
          timePeriod: "2019 Q3",
          value: 1.83,
        },
        {
          timePeriod: "2019 Q4",
          value: 1.71,
        },
        {
          timePeriod: "2020 Q1",
          value: 1.65,
        },
        {
          timePeriod: "2020 Q2",
          value: 1.59,
        },
        {
          timePeriod: "2020 Q3",
          value: 1.58,
        },
      ],
      ColumnData: [
        {
          type: "1月",
          sales: 38,
        },
        {
          type: "2月",
          sales: 62,
        },
        {
          type: "3月",
          sales: 101,
        },
        {
          type: "4月",
          sales: 145,
        },
        {
          type: "5月",
          sales: 58,
        },
        {
          type: "6月",
          sales: 78,
        },
        {
          type: "7月",
          sales: 38,
        },
        {
          type: "8月",
          sales: 18,
        },
      ],
      starValue: 4.5,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  mounted() {
    const progress = new Progress("conProgress", {
      height: 100,
      width: 300,
      autoFit: true,
      percent: 0.7,
      barWidthRatio: 0.3,
      color: ["#2CB5AC", "#E8EDF3"],
    });

    const area = new Area("conArea", {
      data: this.AreaData,
      xField: "timePeriod",
      yField: "value",
      autoFit: true,
      smooth: true,
      meta: {
        value: {
          alias: "订单量",
        },
      },
      xAxis: {
        tickLine: false,
        line: false,
        range: [0, 1],
        label: {
          style: {
            fill: "white",
            fontSize: 0,
          },
        },
      },
      yAxis: {
        tickLine: false,
        line: false,
        grid: {
          line: {
            style: {
              lineDash: [2, 3],
              strokeOpacity: 0.2,
            },
          },
        },
        label: {
          style: {
            fill: "white",
            fontSize: 0,
          },
        },
      },
    });

    const columnPlot = new Column("conColumn", {
      data: this.ColumnData,
      autoFit: true,
      xField: "type",
      yField: "sales",
      color: "l(80) 0:#7bd3ff 1:#249bea",
      label: {
        // 可手动配置 label 数据标签位置
        position: "middle", // 'top', 'bottom', 'middle',
        // 配置样式
        style: {
          fill: "#FFFFFF",
          opacity: 0.6,
        },
      },
      xAxis: {
        label: {
          autoHide: true,
          autoRotate: false,
        },
      },
      meta: {
        type: {
          alias: "类别",
        },
        sales: {
          alias: "销售量",
        },
      },
    });

    const liquidPlot = new Liquid("conLiquid", {
      percent: 0.275,
      autoFit: true,
      outline: {
        border: 4,
        distance: 8,
      },
      wave: {
        length: 128,
      },
      statistic: {
        title: {
          formatter: () => "当前在线率",
          style: ({ percent }) => ({
            fill: "#515a6e",
          }),
        },
      },
    });

    const e = document.createEvent("Event");
    e.initEvent("resize", true, true);
    window.dispatchEvent(e);
    area.update({
      theme: {
        styleSheet: {
          brandColor: "#02cc67",
          paletteQualitative10: [
            "#9DF5CA",
            "#61DDAA",
            "#42C090",
            "#19A576",
            "#008A5D",
            "#006F45",
            "#00562F",
            "#003E19",
            "#002800",
          ],
          paletteQualitative20: [
            "#9DF5CA",
            "#61DDAA",
            "#42C090",
            "#19A576",
            "#008A5D",
            "#006F45",
            "#00562F",
            "#003E19",
            "#002800",
          ],
        },
      },
    });
    area.render();
    progress.render();
    columnPlot.render();
    liquidPlot.render();
  },
  methods: {
    ...mapActions("category", ["findAllOrders"]),
  },
  created() {
    this.findAllOrders().then((res) => {
      this.tableData = res.data.list;
    });
  },
};
</script>

<style lang="scss">
section.app-main {
  background-color: #f5f7f9;
}
</style>
